<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table } from '@/components/Table'
import { ref, unref, reactive, PropType, watch } from 'vue'
import { getTeamUsersApi } from '@/api/dispatch/taskpool'
import { useTable } from '@/hooks/web/useTable'
import { Search } from '@/components/Search'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useForm } from '@/hooks/web/useForm'

const { t } = useI18n()

const props = defineProps({
  team: {
    type: String as PropType<Nullable<string>>,
    default: () => null
  }
})

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await getTeamUsersApi({
      page: unref(currentPage),
      limit: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data || [],
      total: res.count || 0
    }
  }
})
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList, getSelection } = tableMethods

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    type: 'selection',
    search: {
      hidden: true
    }
  },
  {
    field: 'userid',
    label: '用户ID'
  },
  {
    field: 'username',
    label: '用户名',
    search: {
      hidden: true
    }
  },
  {
    field: 'team_code',
    label: '班组号',
    search: {
      hidden: true
    }
  },
  {
    field: 'team',
    label: '班组名',
    search: {
      hidden: true
    }
  },
  {
    field: 'dept_name',
    label: '部门名',
    search: {
      hidden: true
    }
  },
  {
    field: 'dept_code',
    label: '部门号',
    search: {
      hidden: true
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const { formRegister, formMethods } = useForm()
const { setValues } = formMethods

const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}

watch(
  () => props.team,
  (team) => {
    if (!team) return
    const p = {
      team: team.split('(')[0],
      team_code: team.includes('(') ? team.split('(')[1].replace(')', '') : null
    }
    setValues(p)
    searchParams.value = p
  },
  {
    deep: true,
    immediate: true
  }
)

const submit = async () => {
  const keys = await getSelection()
  return keys.map((item) => ({
    userid: item.userid,
    username: item.username,
    team: `${item.team}(${item.team_code})`
  }))
}

defineExpose({
  submit
})
</script>

<template>
  <ContentWrap class="w-full">
    <Search
      :schema="allSchemas.searchSchema"
      @reset="setSearchParams"
      @search="setSearchParams"
      @register="formRegister"
    />
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
      row-key="userid"
    />
  </ContentWrap>
</template>
